<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            Stack Scroll Tools Example
        </h1>
        <p>
            This page contains an example of the stackScroll tool, the play/stopClip tools, and integration with an HTML5 "range" input.
            Scroll by left click dragging or using the mouse wheel
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <div class="row">
        <div class="col-xs-2">
            <ul class="list-group">
                <a id="playClip" class="list-group-item">Play Clip</a>
                <a id="stopClip" class="list-group-item">Stop Clip</a>
            </ul>
            <label>Loop</label>
            <input type="checkbox" id="loop" checked />
            <input type="range" id="slice-range">
        </div>
        <div class="col-xs-6">
            <div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="dicomImage"
                     style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
                </div>
                <div id="mrtopleft" style="position: absolute;top:3px; left:3px">
                    Patient Name
                </div>
                <div id="mrtopright" style="position: absolute;top:3px; right:3px">
                    Hospital
                </div>
                <div id="mrbottomright" style="position: absolute;bottom:6px; right:3px">
                    <div id="frameRate"></div>
                    <div id="zoomText">Zoom: </div>
                    <div id="sliceText">Image: </div>
                </div>
                <div id="mrbottomleft" style="position: absolute;bottom:3px; left:3px">
                    WW/WC:
                </div>
            </div>
        </div>

    </div>

</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
    var element = document.getElementById('dicomImage');

    function onImageRendered(e) {
        var eventData = e.detail;
        var viewport = eventData.viewport;
        document.getElementById('mrbottomleft').textContent = "WW/WC: " + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter);
        document.getElementById('zoomText').textContent = "Zoom: " + viewport.scale.toFixed(2);
    };

    element.addEventListener('cornerstoneimagerendered', onImageRendered);

    function onNewImage(e) {
        var eventData = e.detail;
        var newImageIdIndex = stack.currentImageIdIndex;

        // Update the slider value
        var slider = document.getElementById('slice-range');
        slider.value = newImageIdIndex;

        // Populate the current slice span
        var currentValueSpan = document.getElementById("sliceText");
        currentValueSpan.textContent = "Image " + (newImageIdIndex + 1) + "/" + imageIds.length;

        // if we are currently playing a clip then update the FPS
        var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
        if (playClipToolData !== undefined && Object.keys(playClipToolData.data).length !== 0) {
            document.getElementById('frameRate').textContent = "FPS: " + Math.round(eventData.frameRate);
        } else {
            if (document.getElementById('frameRate').textContent.length > 0) {
                document.getElementById('frameRate').textContent = "";
            }
        }
    }
    element.addEventListener('cornerstonenewimage', onNewImage);

    var loopCheckbox = document.getElementById('loop');
    loopCheckbox.addEventListener('change', function() {
        var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');

        if (!playClipToolData.data.length) {
            playClipToolData.data.push({
              intervalId: undefined,
              framesPerSecond: 30,
              lastFrameTimeStamp: undefined,
              frameRate: 0,
              frameTimeVector: undefined,
              ignoreFrameTimeVector: false,
              usingFrameTimeVector: false,
              speed: 1,
              reverse: false,
              loop: loopCheckbox.checked
            })
        } else {
          playClipToolData.data[0].loop = loopCheckbox.checked;
        }
    });

    var imageIds = [
        'example://1',
        'example://2',
        'example://3'
    ];

    var stack = {
        currentImageIdIndex : 0,
        imageIds: imageIds
    };

    // Initialize range input
    var range, max, slice, currentValueSpan;
    range = document.getElementById('slice-range');

    // Set minimum and maximum value
    range.min = 0;
    range.step = 1;
    range.max = imageIds.length - 1;

    // Set current value
    range.value = stack.currentImageIdIndex;

    function selectImage(event){
        var targetElement = document.getElementById("dicomImage");

        // Get the range input value
        var newImageIdIndex = parseInt(event.currentTarget.value, 10);

        // Get the stack data
        var stackToolDataSource = cornerstoneTools.getToolState(targetElement, 'stack');
        if (stackToolDataSource === undefined) {
            return;
        }
        var stackData = stackToolDataSource.data[0];

        // Switch images, if necessary
        if(newImageIdIndex !== stackData.currentImageIdIndex && stackData.imageIds[newImageIdIndex] !== undefined) {
            cornerstone.loadAndCacheImage(stackData.imageIds[newImageIdIndex]).then(function(image) {
                var viewport = cornerstone.getViewport(targetElement);
                stackData.currentImageIdIndex = newImageIdIndex;
                cornerstone.displayImage(targetElement, image, viewport);
            });
        }
    }

    // Bind the range slider events
    document.getElementById('slice-range').addEventListener("input", selectImage);

    // Enable the dicomImage element and the mouse inputs
    cornerstone.enable(element);
    cornerstoneTools.mouseInput.enable(element);
    cornerstoneTools.mouseWheelInput.enable(element);
    cornerstone.loadImage(imageIds[0]).then(function(image) {
        // Display the image
        cornerstone.displayImage(element, image);

        // Set the stack as tool state
        cornerstoneTools.addStackStateManager(element, ['stack', 'playClip']);
        cornerstoneTools.addToolState(element, 'stack', stack);

        // Enable all tools we want to use with this element
        cornerstoneTools.stackScroll.activate(element, 1);
        cornerstoneTools.stackScrollWheel.activate(element);

        cornerstoneTools.scrollIndicator.enable(element);

        function activate(id) {
            document.querySelectorAll('a').forEach(function(elem) { elem.classList.remove('active'); });
            document.getElementById(id).classList.add('active');
        }

        document.getElementById('playClip').addEventListener('click', function() {
            activate("playClip");
            cornerstoneTools.playClip(element, 31);
            return false;
        });
        document.getElementById('stopClip').addEventListener('click', function() {
            activate("stopClip");
            cornerstoneTools.stopClip(element);
            document.getElementById('frameRate').textContent = "";
            return false;
        });

    });

</script>
</html>
